<template>
	<div id="users">
		<div class="recharge_title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/finance' }">账户资金</el-breadcrumb-item>
				<el-breadcrumb-item>{{this.$route.params.id}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="recharge_cen">
			<div class="recharge_kon"></div>
			<div class="recharge_balance">
				<div class="recharge_font">账户余额</div>
				<div>{{current_user.amount | conver_money}}</div>
			</div>
			<div class="recharge_br"></div>
			<div class="recharge_font" v-if="this.$route.params.id=='充值'">单笔充值金额不超过 ¥ 150,000元</div>
			<div class="recharge_font" v-if="this.$route.params.id=='提现'">单笔提现金额不超过 ¥ 150,000元，可提现余额{{current_user.amount | conver_money}}元</div>
			
			<el-input v-model="money.price" placeholder="请输入充值金额" class="recharge_input" v-if="this.$route.params.id=='充值'"></el-input>	
			<el-input v-model="bink.amount" placeholder="请输入提现金额" class="recharge_input" v-if="this.$route.params.id=='提现'"></el-input>
			
			<div class="recharge_foot" v-if="this.$route.params.id=='充值'"><img src="../../assets/finance/zhifubao.png" class="recharge_zhi" /> 支付宝支付</div>
			<div class="recharge_foot" @click="bindCard" style="font-size: 12px;color:#8492a6;" v-if="this.$route.params.id=='提现' && binkObj==null">暂未设置绑定账户，<span style="color:#20a0ff;">去设置</span></div>
			<div class="recharge_foot" v-if="this.$route.params.id=='提现' && binkObj!=null">
				<el-tooltip class="item" effect="dark" content="" placement="right">
     			 	<el-button>
     			 		{{binkObj.channel_title}}
     			 		{{binkObj.account}}
     			 	</el-button>
    				</el-tooltip>
			</div>
		
			<div>
				<el-button type="primary" @click="recharge" v-if="this.$route.params.id=='充值'">立即充值</el-button>
				<el-button type="primary" @click="withdrawals" v-if="this.$route.params.id=='提现'">申请提现</el-button>
			</div>
		</div>

		<el-dialog title="设置提现账户" :visible.sync="dialogTableVisible">
			<div>
				<span>开户人姓名</span>
				<el-input v-model="bink.name" placeholder="请输入充值金额" class="recharge_input"></el-input>
			</div>
			<div>
				<span>银行卡号</span>
				<el-input v-model="bink.account" placeholder="请输入充值金额" class="recharge_input"></el-input>
			</div>
			<div>
				<span>开户银行</span>
				<el-input v-model="bink.channel_title" placeholder="请输入充值金额" class="recharge_input"></el-input>
			</div>
			<div>
				<span>银行支行</span>
				<el-input v-model="bink.open_bank" placeholder="请输入充值金额" class="recharge_input"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
		    		<el-button @click="dialogVisible = true">取 消</el-button>
		    		<el-button type="primary" @click="sureCard">确 定</el-button>
		  	</span>
		</el-dialog>
	</div>
</template>

<script>
	import Vue from 'vue'
	import {conver_money } from '@/utils/filters'
	import { mapActions, mapState, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				money: {
					pay_type: 'alipay_pc_direct',
					price: null
				},
				bink:{
					name:"",
					account:"",
					channel_title:"",
					open_bank:"",
					channel_type:'bank',
					amount:""
				},
//				withdrawalsObj:{
//					name:"",
//					amount:"",
//					account:"",
//					open_bank_code:"",
//					channel_type:"bank",
//					open_bank:""
//				},
				dialogTableVisible: false,
				dialogVisible: false,
				binkObj:{}
			}
		},
		computed: { ...mapGetters(['current_user']) },
		mounted() {
			this.userObj()
			console.log(this.current_user)
		},
		methods: {
			//充值
			recharge() {
				var pingpp = require('pingpp-js');
				this.money.price = parseInt(this.money.price) * 100
				this.$http.post("payments/recharge", this.money).then(res => {
					console.log(res)
					pingpp.createPayment(res.charge, function(result, err) {
						console.log(result)
					});
				})
			},
			//申请提现
			withdrawals() {
				this.$http.post("users/appoint_cash", this.bink).then(res => {
					console.log(res)
				})
			},
			bindCard(){
				this.dialogTableVisible=true
			},
			//绑定银行卡
			sureCard(){
				delete this.bink.amount
				this.$http.post("users/cash_account", this.bink).then(res => {
					this.binkObj=res
					console.log(res)
				})
			},
			//获取用户
			userObj(){
				this.$http.get("users/owner_info").then(res => {
					console.log(res)
					if(res.user.deposit_accounts.length!=0){
						for (var i in res.user.deposit_accounts) {
					        if (res.user.deposit_accounts[i].channel_type == 'bank') {
					          	this.binkObj=res.user.deposit_accounts[i]
					        }
					    }
      				}
				})
			}
		}
	}
</script>

<style>
	.recharge_title {
		height: 70px;
		background-color: white;
	}
	
	.el-breadcrumb {
		line-height: 70px;
		margin-left: 3%;
	}
	
	.recharge_cen {
		background-color: white;
		width: 90%;
		margin: 3% auto;
		height: 900px;
		text-align: center;
	}
	
	.recharge_kon {
		height: 10px;
	}
	
	.recharge_balance {
		background-color: #f9fafc;
		height: 160px;
		text-align: center;
		width: 90%;
		margin: 2% auto;
		line-height: 60px;
	}
	
	.recharge_input {
		width: 30%;
		margin: 6% auto;
	}
	
	.recharge_br {
		height: 1px;
		background-color: #e0e6ed;
		width: 90%;
		margin: 4% auto;
	}
	
	.recharge_foot {
		background-color: #f9fafc;
		height: 60px;
		text-align: 60px;
		width: 30%;
		margin: 2% auto;
		line-height: 60px;
	}
	
	.recharge_font {
		font-size: 14px;
		color: #5e6d82;
	}
	
	.recharge_zhi {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 25px;
		width: 25px;
	}
</style>